<template>
	<div v-if="detail">
		<NewSearchDetail v-model="visible" :title="title">
			<div class="cont-left">
				<div class="trash-base">
					<div class="detail-title border-bottom-spot">
						基本信息
					</div>
					<div class="base-cont flex j-between a-center">
						<div class="flex a-center">
							<img class="m-r-10" src="../../../../assets/main/trash_detail.png">
							<div class="wenzi">
								<p class="m-b-5" style="
    color: #fff;">
									{{detail.bigTypeName}}-{{ detail.smallTypeName}}
									<span class="status">{{detail.status || '- -'}}</span>
								</p>
								<p>{{detail.number || '- -'}}</p>
							</div>
						</div>
						<div class="item">
							<p class="line1 m-b-5" :title="detail.departName">所属机构
								:<span>{{ detail.departName || '- -' }}</span></p>
							<p class="line1" :title="detail.maintain">维护单位
								:<span>{{ detail.maintain || '- -' }}</span></p>
						</div>
						<div class="item">
							<p class="m-b-5">责任人
								:<span>{{ detail.principal || '- -' }}</span></p>
							<p>启用日期
								:<span>{{ detail.date ? detail.date.split(' ')[0] : '- -' }}</span></p>
						</div>
					</div>
					<div class="base-bottom">
						<Icon custom="i-icon icon-dizhi1" size="18" color="#eee" />
						<span>{{detail.site || '- -'}}</span>
					</div>
				</div>
				<div class="trash-left">
					<div class="left-img">
						<img :src="detail.picture ? detail.picture : trashImg">
					</div>
					<div class="left-btns">
						<div class="left-btns-item"
							:style="{'cursor':detail.videoonlinestatus == 0 ? 'pointer' : 'not-allowed','color':detail.videoonlinestatus == 0 ? '#eeeeee' : '#84919e'}"
							@click.stop="onClickVideo">
							<Icon custom="i-icon icon-jiankong11" size="24" />
							摄像头
						</div>
					</div>
				</div>
			</div>

			<div class="cont-right">
				<div class="right-bottom">
					<div class="bottom-work">
						<div class="border-bottom-spot configuration-title">
							今日实况
						</div>
						<div class="noScroll work-cont">
							<div class="notData" v-if="workRecordArr.length == 0">
								<img src="../../../../assets/new/detail_no.png">
								<p>暂无数据</p>
							</div>
							<div class="work-cont-item" v-for="(item,index) in workRecordArr" :key="index">
								<div class="title flex j-between">
									<p>{{item.shiftName}} {{getWorkTime(item.planStartTime)}} ~
										{{getWorkTime(item.planEndTime)}}</p>
									<span
										v-if="item.planStartTime && item.planEndTime && item.workStartTime && !isBeyondWork(item.planStartTime,item.planEndTime,item.workStartTime)">超时未清</span>
								</div>
								<div class="text-center p-10" v-if="item.status == 0">
									未开始
								</div>
								<div class="cont flex p-10" v-else>
									<span class="w-p-50" style="margin-left: 15px;">清运车辆 {{item.carNum}}</span>
									<span class="w-p-50" style="margin-left: 15px;">清运时间
										{{getWorkTime(item.workStartTime) || '- -'}}</span>
								</div>
							</div>
						</div>
					</div>
					<div class="bottom-calendar">
						<div class="border-bottom-spot configuration-title">
							异常日历
						</div>
						<div class="trash_calendar">
							<el-calendar v-model="workCalendar">
								<template slot="dateCell" slot-scope="{data}">
									<!-- 非当月 -->
									<div v-if="data.type != 'current-month'" @click.stop>
									</div>
									<!-- 当月 -->
									<div v-else class="cont"
										:class="{'day-after':isBeyondDate(data.day),'success':getCalendarDate(data.day) && getCalendarDate(data.day).sjCount > 0}"
										@click.stop="onClickCalendar(data.day)">
										<p>
											{{ data.day.split('-')[2]}}
										</p>
										<div class="cont-status"
											v-if="getCalendarDate(data.day) && (getCalendarDate(data.day).is_later_in != 0 || getCalendarDate(data.day).is_leave_early != 0 || getCalendarDate(data.day).is_no_work != 0)">
											<span class="err"></span>
										</div>
									</div>
								</template>
							</el-calendar>
						</div>
						<!-- 日历弹框 -->
						<div class="case noScroll" v-if="calendarCaseVisible">
							<div class="case-date" @click.stop="calendarCaseVisible=false">
								<div class="bottom-work-img">
									{{modalDate}}
								</div>
								<Icon custom="i-icon icon-guanbi" size="18" />
							</div>
							<div class="case-cont">
								<div class="case-cont-item">
									<div class="item">
										<p class="">收集量</p>
										<div class="line"></div>
										<span class="no-equipment">暂无设备</span>
									</div>
								</div>
								<div class="case-cont-item">
									<div class="item">
										<p class="">收集次数</p>
										<div class="line"></div>
										<span>{{collectCount}}</span>
									</div>
								</div>
							</div>
							<div class="case-list p-20">
								<div class="m-b-10 case-list-name">报警异常</div>
								<div class="noData">
									<img src="../../../../assets/new/detail_no.png">
									<p>暂无异常</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</NewSearchDetail>
	</div>
</template>

<script>
	import bus from '@/utils/bus'
	import NewSearchDetail from "./NewSearchDetail.vue";
	import {
		formatDate
	} from '@/utils/dateRangUtil'
	export default {
		components: {
			NewSearchDetail,
		},
		data() {
			return {
				visible: false,
				dataId: '',
				title: '',
				detail: {},
				trashImg: require('../../../../assets/main/trash-img.png'),
				workCalendar: new Date(),
				caledarArr: [],
				date: '',
				// 日历弹框
				calendarCaseVisible: false,
				modalDate: '',
				collectCount: '', // 收集次数
				workRecordArr: [],
				// {
				// 		shiftName: '1111',
				// 		planStartTime: '2021-10-01',
				// 		planEndTime: '2021-10-02',
				// 		workStartTime: '',
				// 		status: 0,
				// 		carNum: '111'
				// 	},
				// 	{
				// 		shiftName: '1111',
				// 		planStartTime: '2021-10-01',
				// 		planEndTime: '2021-10-02',
				// 		workStartTime: '',
				// 		status: 1,
				// 		carNum: '111'
				// 	},
				// 	{
				// 		shiftName: '1111',
				// 		planStartTime: '2021-10-01',
				// 		planEndTime: '2021-10-02',
				// 		workStartTime: '',
				// 		status: 2,
				// 		carNum: '111'
				// 	}
				
			}
		},
		watch: {
			dataId(newVal) {
				if (newVal) {
					this.getDetail()
					this.getTrashCaledar()
					this.getTrashWorkRecord()
				}
			},
			visible(newVal) {
				if (!newVal) {
					this.dataId = ''
					this.workCalendar = new Date()
					this.calendarCaseVisible = false
					this.date = formatDate(new Date())
					this.workRecordArr = []
				}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				bus.$on('showMainSearchTrashDetail', data => {
					this.dataId = data.id
					this.title = data.title
					this.visible = true
				})
				this.date = formatDate(new Date())
				// 日历组件上个月添加点击事件
				this.$nextTick(() => {
					// 点击前一个月
					let prevBtn = document.querySelector(
						'.trash_calendar .el-calendar__button-group .el-button-group>button:nth-child(1)');
					prevBtn.addEventListener('click', () => {
						this.onClickMonthList()
					})
				})
				// 日历组件下个月添加点击事件
				this.$nextTick(() => {
					// 点击后一个月
					let prevBtn = document.querySelector(
						'.trash_calendar .el-calendar__button-group .el-button-group>button:last-child');
					prevBtn.addEventListener('click', () => {
						this.onClickMonthList()
					})
				})
			},
			getDetail() {
				this.$store.dispatch('getFacilityDetail', this.dataId).then(res => {
					this.detail = res
					if (this.detail.status == 0) {
						this.detail.status = '正常'
					} else if (this.detail.status == 1) {
						this.detail.status = '废弃'
					} else if (this.detail.status == 2) {
						this.detail.status = '维修'
					} else if (this.detail.status == 3) {
						this.detail.status = '拆除'
					} else if (this.detail.status == 4) {
						this.detail.status = '暂停'
					}
				})
			},
			// 作业日历点击上月下月触发
			onClickMonthList() {
				this.date = formatDate(this.workCalendar)
				this.getTrashCaledar()
			},
			// 获取日历
			getTrashCaledar() {
				let params = {
					id: this.dataId,
					date: this.date + ' 00:00:00'
				}
				this.$http.getMapTrashCaledar(params).then((res) => {
					if (res.code === 200) {
						this.caledarArr = res.result
					}
				})
			},
			// 获取作业记录
			getTrashWorkRecord() {
				let params = {
					id: this.dataId,
				}
				this.$http.getMapTrashWorkRecord(params).then((res) => {
					if (res.code === 200) {
						this.workRecordArr = res.result
					}
				})
			},
			// 点击日历某一天
			onClickCalendar(date) {
				if (!this.isBeyondDate(date)) {
					let data = this.caledarArr.find(item => item.date == date)
					this.collectCount = data.sjCount
					this.modalDate = date
					this.calendarCaseVisible = true
				}
			},
			// 是否超出日期
			isBeyondDate(date) {
				return formatDate(new Date()) < date
			},
			isBeyondWork(start, end, work) {
				if(start&&end&&work){
					let startTime = new Date(start),endTime = new Date(end),workTime = new Date(work);
					console.log(startTime,endTime,workTime)
					if (startTime.getTime() <= workTime.getTime() && workTime.getTime() <= endTime.getTime()) {
						return true
					} else {
						return false
					}
				}
			},
			getCalendarDate(date) {
				return this.caledarArr.find(item => item.date == date)
			},
			// 今日状况时间 去掉年月日
			getWorkTime(time) {
				if (time) {
					let arr = time.split(' ')
					return arr[1]
				} else {
					return ''
				}
			},
			// 摄像头
			onClickVideo() {
				if (this.detail.videoonlinestatus == 0) {
					let params = {
						equipcode: this.detail.equipcode,
						eqptype: this.detail.eqptype,
						details: this.detail.channels,
					}
					bus.$emit('showPlayVideoModal', params)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/scss/iviewCssReset/input";
	@import "@/scss/iviewCssReset/elCalendar";

	.head-title {
		background-image: url(../../../../assets/new/wctop.png);
		background-size: 100% 100px;
		background-repeat: no-repeat;
		width: 100%;
		height: 111px;
		line-height: 100px;
		padding: 0 20px 10px;
		box-sizing: border-box;
		font-size: 30px;
		font-weight: bold;
		text-align: center;
		color: #eee;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.cont-left {
		margin-right: 10px;
		width: 748px;
		height: 220px;
		background-image: url(../../../../assets/new/trash.png);
		background-size: 100% 100%;
	}

	.cont-right {
		width: 440px;

	}

	// 左侧
	.trash-left {
		width: 746px;
		height: 580px;
		margin-right: 7px;
		margin-top: 10px;
		background-image: url(../../../../assets/new/wc-border.png);
		background-size: 100% 100%;

		.left-img {
			display: flex;
			justify-content: center;
			margin-bottom: 40px;
			padding: 0 30px;
			width: 100%;

			img {
				max-width: 680px;
				margin-top: 70px;
				height: 360px;
			}
		}

		.left-btns {
			display: flex;
			justify-content: space-around;
			margin: auto;

			.left-btns-item {
				display: flex;
				justify-content: center;
				width: 120px;
				height: 45px;
				background: rgba(30, 176, 252, 0.35);
				border: 1px solid #1eb0fc;
				border-radius: 4px;
				color: #ffffff;
				font-size: 14px;
				font-weight: 500;
				line-height: 45px;
				cursor: pointer;

				.ivu-icon {
					line-height: 1.6;
				}
			}
		}
	}

	.trash-base {

		// border: 1px solid rgba(255, 255, 255, 0.1);
		.base-cont {
			display: flex;
			padding: 22px 35px;
			color: rgba(255, 255, 255, 0.7);
			line-height: 28px;

			img {
				width: 61px;
				height: 60px;
				border-radius: 50%;
			}

			.item {
				height: 60 px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				p {
					font-size: 14px;

					span {
						color: #eee;
						margin-left: 5px;
						padding: 15px;
					}
				}
			}

			.status {
				background: rgba(30, 176, 252, 0.35);
				color: #32b16c;
				display: inline-block;
				width: 50px;
				height: 24px;
				border: 1px solid #1eb0fc;
				border-radius: 4px;
				margin-left: 10px;
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #1eb0fc;
				line-height: 22px;
				text-align: center;
			}
		}

		.base-bottom {
			display: flex;
			align-items: center;
			height: 54px;
			padding-left: 38px;
			color: #a0a0a0;

			// border-top: 1px solid rgba(255, 255, 255, 0.1);
			span {
				margin-left: 4px;
				color: #ffffff;
				font-size: 16px;
			}
		}
	}

	.cont-right {
		.right-bottom {
			.bottom-work {
				// border: 1px solid rgba(255, 255, 255, 0.1);

				display: flex;
				flex-direction: column;

				width: 454px;
				height: 408px;
				background-image: url(../../../../assets/new/wc-border2.png);
				background-size: 100% 100%;
				.work-cont::-webkit-scrollbar{
					width: 5px;
				}
				.work-cont::-webkit-scrollbar-thumb{
					background-color: #CCCCCC;
				}
				.work-cont {
					height: 320px;
					padding: 15px;
					overflow-y: auto;
					color: #ffffff;
					font-size: 14px;
					font-weight: 500;
					margin: 0 auto;

					.work-cont-item {
						// border: 1px solid rgba(255, 255, 255, 0.2);
						margin-bottom: 19px;
						background-image: url(../../../../assets/new/border-1.png);
						background-size: 100% 100%;
						width: 401px;
						height: 80px;

						.title {
							line-height: 32px;
							// background: rgba(255, 255, 255, 0.1);
							padding: 0 22px;

							span:last-child {
								color: #e45d00;
							}
						}
						.p-10{
							line-height: 28px;
						}
					}

					.work-cont-item:last-child {
						margin-bottom: 0;
					}
				}
			}

			.bottom-calendar {
				// border: 1px solid rgba(255, 255, 255, 0.1);
				width: 454px;
				height: 400px;
				background-image: url(../../../../assets/new/wc-border2.png);
				background-size: 100% 100%;
				overflow: hidden;
				position: relative;

				// padding-top: 12px;
				// overflow:hidden;

				.trash_calendar {
					position: relative;
					.cont {
						.cont-status {
							.err {
								display: inline-block;
								width: 8px;
								height: 8px;
								border-radius: 8px;
								text-align: center;
								background: #eb6100;
							}
						}
					}

					.success {
						color: #fff;

						p {
							background: #1eb0fc;
							width: 26px;
							height: 26px;
						}
					}
				}
				// 弹框
				.case {
					position: absolute;
					top: 0;
					left: 0;
					width: 454px;
					height: 400px;
					background-image: url(../../../../assets/new/detail_rili_bgc.png);
					background-size: 100% 100%;
					overflow-y: auto;
				
					.case-date {
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #eee;
						line-height: 46px;
						padding:11px 20px 0 14px;
				
						i {
							cursor: pointer;
						}
					}
				
					.case-cont {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 60px;
						padding: 0 20px;
						margin: 0 6px;
						color: #e9eaed;
						border-bottom: 1px solid rgba(30,176,252,.6);
				
						.item {
							width: 180px;
							height: 40px;
							background-image: url(../../../../assets/new/detail_rili_line.png);
							background-size: 100% 100%;
							line-height: 40px;
							border-radius: 40px;
							display: flex;
							align-items: center;
							
							.line{
								width: 1px;
								height: 18px;
								background-color: #1EB0FC;
							}
				
							p {
								width: 50%;
								text-align: center;
								position: relative;
							}
				
							// p::before {
							// 	content: "";
							// 	width: 1px;
							// 	height: 15px;
							// 	background: rgba($color: #fff, $alpha: 0.3);
							// 	position: absolute;
							// 	right: 0;
							// 	top: 10px;
							// }
				
							span {
								width: 50%;
								text-align: center;
							}
				
							.no-equipment {
								color: #1EB0FC;
							}
						}
					}
				
					.case-list {
						color: #eee;
				
						.time {
							padding: 0 3px;
							border-radius: 2px;
							background: #333333;
							position: relative;
							display: inline-block;
						}
				
						.content {
							margin-top: 10px;
						}
				
						::v-deep {
							.ivu-timeline-item-tail {
								border-left: 2px solid #2d2d2d;
							}
				
							.ivu-timeline-item-head-blue {
								border-color: #2d2d2d;
								color: #2d2d2d;
							}
				
							.ivu-timeline-item-head {
								background-color: #000000;
							}
						}
					}
				}
			}
		}
	}

	.detail-title {
		font-size: 16px;

		font-weight: bold;
		color: #23cefd;
		line-height: 48px;

		padding-left: 20px;
		background-image: url(../../../../assets/new/titlebox.png);
		width: 206px;
		height: 46px;
		background-size: 100% 100%;
		margin-left: 9px;
		margin-top: 10px;
	}

	.configuration-title {
		line-height: 48px;
		color: #ffffff;
		font-size: 16px;
		font-weight: bold;
		padding-left: 20px;
		background-image: url(../../../../assets/new/titleboxbig.png);
		width: 366px;
		height: 46px;
		background-size: 100% 100%;
		margin-left: 14px;
		margin-top: 17px;
	}

	.border-top-spot {
		// border-top: 1px solid rgba(255, 255, 255, 0.2);
		position: relative;
		width: 66px;
		height: 16px;
		font-size: 16px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #ffffff;
		line-height: 16px;
	}

	.border-top-spot::after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		box-sizing: border-box;
		border-left: 3px solid #fff;
		border-right: 3px solid #fff;
		background: rgba(255, 255, 255, 0.1);
	}

	.border-bottom-spot {
		// border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		position: relative;
	}

	.border-bottom-spot::before {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		box-sizing: border-box;
		// border-left: 3px solid #fff;
		// border-right: 3px solid #fff;
		// background: rgba(255, 255, 255, 0.1);
	}
	.notData{
		font-size: 16px;
		text-align: center;
		margin-top: 50px;
		img{
			width: 160px;
			height: 160px;
		}
	}
	.noData{
		font-size: 16px;
		text-align: center;
		padding: 0;
		img{
			width: 120px;
			height: 120px;
			margin: 0;
		}
	}
	.bottom-work-img{
		width: 306px;
		height: 46px;;
		background-image: url(../../../../assets/new/detail_nav_306.png);
		background-size: 100% 100%;
		padding-left: 20px;
	}
	::v-deep{
		.el-calendar__header {
		    padding: 4px 20px;
		}
		.el-calendar .el-calendar__body .el-calendar-table__row td .el-calendar-day {
		    height: 42px;
		}
		.el-calendar-table thead th {
		    padding: 8px 0;
		}
		.el-calendar .el-calendar__body .el-calendar-table__row td .el-calendar-day .cont p {
		    width: 26px;
		    height: 26px;
		    line-height: 26px;
		}
		.el-calendar .el-calendar__body .el-calendar-table__row td .el-calendar-day .cont .cont-status {
		    line-height: 16px;
		}
	}
</style>
